<template>
    <div class="app-container profile-container">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span>个人中心</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="user-info-card" shadow="hover">
               <div class="user-avatar text-center">
                 <el-avatar :size="100" :src="avatar" icon="el-icon-user-solid"></el-avatar>
                 <h3 class="username">{{ nickname }}</h3>
               </div>
              <el-descriptions :column="1" border>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i> 用户名称
                  </template>
                  {{ user.userName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i> 手机号码
                  </template>
                  {{ user.phonenumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-message"></i> 用户邮箱
                  </template>
                  {{ user.email }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i> 所属角色
                  </template>
                   <!-- 注意：此处直接使用 vuex getter 的 roles 可能需要调整，取决于 roles 存储的具体内容 -->
                   <el-tag size="small" v-for="roleKey in user.roleIds" :key="roleKey">{{ getRoleName(roleKey) }}</el-tag>
                </el-descriptions-item>
                  <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-date"></i> 创建日期
                  </template>
                  <!-- 确保你有一个可用的 parseTime 过滤器或方法 -->
                  {{ user.createTime | parseTime('{y}-{m}-{d}') }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :span="16">
             <el-card shadow="hover">
               <el-tabs v-model="activeTab">
                 <el-tab-pane label="基本资料" name="basic">
                   <!-- 传递 user 对象给子组件 -->
                   <UserInfo :user="currentUser" @profileUpdated="getUser" />
                 </el-tab-pane>
                 <el-tab-pane label="修改密码" name="password">
                    <ResetPwd />
                 </el-tab-pane>
               </el-tabs>
             </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import { getUserProfile } from '@/api/system/user'
  import UserInfo from './userInfo'
  import ResetPwd from './resetPwd'
  // 假设你有全局过滤器 parseTime, 否则需要导入或实现
  // import { parseTime } from '@/utils/ruoyi' // 示例路径
  
  export default {
    name: 'FrontProfile',
    components: { UserInfo, ResetPwd },
    // filters: { parseTime }, // 如果需要本地注册过滤器
    data() {
      return {
        user: {}, // 存储从接口获取的详细用户信息
        activeTab: 'basic',
        // 假设角色信息需要从某个地方获取，例如 store 或 字典数据
        roleMap: {} // 用于根据 roleId 获取角色名称, 需要初始化
      }
    },
    computed: {
      ...mapGetters([
        'avatar',
        'nickname',
        // 'roles' // getter 中的 roles 可能只是角色 key 列表，不包含名称
      ]),
      // 创建一个计算属性传递给子组件，避免直接修改 prop
      currentUser() {
          // 深拷贝 user 对象，防止子组件直接修改父组件状态
        return JSON.parse(JSON.stringify(this.user));
      }
    },
    created() {
      this.getUser()
      // 可能需要在此处加载角色映射信息 this.loadRoleMap()
    },
    methods: {
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data || {} // 确保 data 存在
          // 如果需要显示角色名称，可能需要在这里处理 roleIds
          // 假设 response.roles 包含角色列表 { roleId: 1, roleName: '管理员' }
          this.updateRoleMap(response.roles || []) // 更新角色映射
        })
      },
       // 示例：更新角色映射的方法
      updateRoleMap(roles) {
        const map = {};
        roles.forEach(role => {
          map[role.roleId] = role.roleName;
        });
        this.roleMap = map;
      },
       // 示例：根据 roleId 获取角色名称
      getRoleName(roleId) {
        return this.roleMap[roleId] || '未知角色';
      },
      // loadRoleMap() {
      //   // 实现加载角色信息的逻辑，例如从字典接口获取
      // }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .profile-container {
    padding: 20px;
    max-width: 1200px;
    margin: 20px auto;
    background-color: #fff; /* 添加背景色以与其他区域区分 */
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
  }
  
  .user-info-card {
    .user-avatar {
      margin-bottom: 20px;
      .username {
        margin-top: 10px;
        font-size: 18px;
      }
    }
    .el-descriptions {
      margin-top: 20px;
    }
     .el-tag {
        margin-right: 5px;
     }
  }
  
  .text-center {
    text-align: center;
  }
  </style>